import React, { PureComponent } from 'react';
import { Table, Row, Col } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import { NumberView } from '@/components/BaseTable';

@connect(state => ({
  plans: state.ContractPlanProductTypeDetail.supplyPlanItems,
  isParking: state.ContractPlanProductTypeDetail.isParking,
  supplySize: state.ContractPlanProductTypeDetail.supplySize,
  supplyPlanSize: state.ContractPlanProductTypeDetail.supplyPlanSize,
  supplyActualSize: state.ContractPlanProductTypeDetail.supplyActualSize,
}))
export default class SupplyPlan extends PureComponent {
  state = {};

  render() {
    const { plans, isParking } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        align: 'center',
        width: 60,
        render: (text, record, index) => index + 1,
      },
      {
        title: '供货日期',
        dataIndex: 'supplyDate',
        align: 'center',
        render: time => moment(time).format('YYYY-MM-DD'),
      },
      {
        title: isParking ? '车位数(个数)' : '套数(套)',
        dataIndex: 'num',
        align: 'right',
        render: text => <NumberView cellData={text * 1} precision={0} />,
      },
      {
        title: '均价(元/平米,个)',
        dataIndex: 'avgPrice',
        align: 'right',
        render: text => <NumberView cellData={text * 1} precision={0} />,
      },
      {
        title: '金额(万元)',
        dataIndex: 'price',
        align: 'right',
        render: text => <NumberView cellData={(text * 1) / 10000} precision={4} />,
      },
      {
        title: '面积(平米)',
        dataIndex: 'saleArea',
        align: 'right',
        render: text => {
          if (isParking === 0) {
            return <NumberView cellData={text * 1} precision={2} />;
          }
          return '';
        },
      },
      {
        title: '套均面积(平米)',
        dataIndex: 'avgRoomArea',
        align: 'right',
        render: text => {
          if (isParking === 0) {
            return <NumberView cellData={text * 1} precision={2} />;
          }
          return '';
        },
      },
    ];
    return (
      <Row gutter={[0, 10]}>
        <Col>
          <b style={{ fontSize: 14 }}>业态供货计划</b>（共{this.props.supplySize}批供货，已供
          {this.props.supplyActualSize}批，未供{this.props.supplyPlanSize}批。）
        </Col>
        <Col>
          <Table
            size="middle"
            rowKey="id"
            loading={plans && !plans.length}
            pagination={false}
            bordered
            dataSource={plans}
            columns={columns}
            scroll={{ y: 34 * 3 }}
          />
        </Col>
      </Row>
    );
  }
}
